<div class="tw-flex tw-flex-col">
  <div class="tw-flex tw-gap-4 tw-items-baseline">
    <bit-icon-tile size="large" icon="bwi-exclamation-triangle" variant="danger"></bit-icon-tile>
    <h1 bitTypography="h2" noMargin class="!tw-mb-0">{{ "phishingPageTitleV2" | i18n }}</h1>
  </div>

  <hr class="!tw-mt-6 !tw-mb-4 !tw-border-secondary-100" />

  <p bitTypography="body1">{{ "phishingPageSummary" | i18n }}</p>

  <bit-callout class="tw-mb-0" type="danger" icon="bwi-globe" [title]="null">
    <span class="tw-font-mono tw-break-all">{{ phishingHostname$ | async }}</span>
  </bit-callout>

  <bit-callout class="tw-mt-2" [icon]="null" type="default">
    <p bitTypography="body2">
      {{ "phishingPageExplanation1" | i18n }}<b>Phishing.Database</b
      >{{ "phishingPageExplanation2" | i18n }}
    </p>

    <a
      bitLink
      linkType="primary"
      rel="noreferrer"
      target="_blank"
      href="https://bitwarden.com/help/phishing-blocked/"
    >
      {{ "phishingPageLearnMore" | i18n }}<i class="bwi bwi-angle-right" aria-hidden="true"></i>
    </a>
  </bit-callout>

  <div class="tw-flex tw-flex-col tw-gap-4 tw-items-center tw-mt-2">
    <button type="button" (click)="closeTab()" bitButton buttonType="primary" [block]="true">
      {{ "phishingPageCloseTabV2" | i18n }}
    </button>
    <button
      class="tw-text-sm"
      type="button"
      (click)="continueAnyway()"
      bitLink
      linkType="secondary"
    >
      {{ "phishingPageContinueV2" | i18n }}
    </button>
  </div>
</div>
